<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>菜单列表</title>
    <link rel="stylesheet" th:href="@{/src/css/layui.css}">
</head>
<body>
<br />
<div class="layui-btn-group TableTools" style="margin-left: 10px">
        <button class="layui-btn" id="addMenu">添加菜单</button>
        <button class="layui-btn" id="editMenu">编辑菜单</button>
        <button class="layui-btn layui-btn-danger" id="delMenu">删除菜单</button>
    <button class="layui-btn layui-btn-primary">（不选中为添加顶级菜单，选中添加子菜单）</button>
</div>
<div>
    <table class="layui-hidden" id="treeTable" lay-filter="treeTable"></table>
</div>

<script type="text/html" id="iconTel">
    {{# if(d.icon){ }}
        <i class="layui-icon">{{d.icon}}</i>
    {{#  }else{ }}
    {{# }  }}
</script>

<script th:src="@{/src/layui.js}"></script>
<script>

    layui.config({base:'/src/app/'}).use(['treeGrid','layer','jquery','laytpl'],function () {
        var treeGrid = layui.treeGrid,
            layer = layui.layer,
            laytpl = layui.laytpl,
            $ = layui.jquery;

        treeGrid.render({
            id:'treeTable',
            elem:'#treeTable',
            cellMinWidth:80,
            page:false,
            treeId:'id',
            treeUpId:'parentId',
            treeShowName:'title',
            url:'/menus/list',
            cols:[
                [
                    {type:'checkbox'},
                    {title:'菜单名',field:'title'},
                    {title:'图标',field:'icon',templet:'#iconTel'},
                    {title:'链接',field:'href'},
                    {title:'权限标识',field:'perm'},
                    {title:'排序',field:'sorting',event:'sorting',style:'cursor:pointer'}
                ]
            ]
        })
        
        //添加菜单
        $("#addMenu").click(function () {
            var checkStatus = treeGrid.checkStatus('treeTable');
            var data  = checkStatus.data;//获取选中行的数据
            if(data.length>1){
                layer.msg('只能选择一条数据',{icon:5});
                return ;
            }
            var parentId;

            if(data != ''){
                //获取当前行的节点菜单的Id
                parentId = data[0].id;
            }
            //如果没有勾选复选框，默认id的值为0；即是根节点。
            //如果勾选复选框 则当前节点id为新增节点的父id
            parentId = parentId==undefined?0:parentId;

            layer.open({
                type:2,
                title:'添加菜单',
                area:['500px','600px'],
                content:'/menus/addMenu/'+parentId
            })
        })

        //编辑菜单
        $("#editMenu").click(function () {
            var checkStatus = treeGrid.checkStatus('treeTable');
            var data  = checkStatus.data;//获取选中行的数据
            if(data.length!=1){
                layer.msg('只能选择一条数据',{icon:5});
                return ;
            }
            if(data != ''){
                //获取当前行的节点菜单的Id
                var  id = data[0].id;
            }
            layer.open({
                type:2,
                title:'编辑菜单',
                area:['500px','600px'],
                content:'/menus/editMenu/'+id
            })
        })

        //删除菜单信息  只能单条删除
        $("#delMenu").click(function () {
            var checkStatus = treeGrid.checkStatus('treeTable');
                data = checkStatus.data;
                if (data.length!=1){
                    layer.msg("只能删除单条数据!",{icon:5});
                    return;
                }
                if (data!=null && data[0].title == '后台首页'){
                    layer.msg("此条数据不能删除");
                    return ;
                }
            $.ajax({
                url:'/menus/delete/'+data[0].id,
                type:'delete',
                dataType:'json',
                success:function (result) {
                    if(result.code == 200){
                        layer.msg('删除成功',{icon:1,time:1000},function () {
                            treeGrid.reload('treeTable',{})
                        })
                    }else{
                        layer.msg(result.message,{icon:5});
                    }
                }
            })
        })

        //排序 监听行事件
        treeGrid.on('tool(treeTable)',function (row) {
            if (row.event==='sorting'){
                layer.prompt({
                    formType:2,
                    area: ["300px","300px"],
                    title:"修改id为["+row.data.menuId+"]的排序",
                    value:row.data.sorting
                },function (value,index) {
                    layer.close(index);
                    if (value!=row.data.sorting){
                        $.ajax({
                            url:'/menus/updateMenusSorting',
                            data:{'menusId':row.data.menuId,'sorting':value},
                            type:'put',
                            dataType:'json',
                            success:function (result) {
                                if(result.code == 200){
                                    layer.msg(result.message,{icon:1,time:1000},function () {
                                        treeGrid.reload('treeTable',{})
                                    })
                                }else{
                                    layer.msg(result.message,{icon:5});
                                }
                            }
                        })
                    }
                })
            }
        })
    })
</script>
</body>
</html>